<template>
	<view>
		<button style="position: absolute;top: 10rpx;z-index: 999;" @click="chooseMap">选择位置进行查询</button>
		<map style="height: 100vh; width: 100%;" :latitude="latitude" :longitude="longitude" scale="18" :markers="markers"></map>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { GET_HOUSE } from '../../api/house';
	
	const latitude = ref()
	const longitude = ref()
	const markers = ref([])
	// 1.想要打开这个页面的时候获取当前客户端的位置，然后以当前位置为中心渲染地图
	const chooseMap = () => {
		uni.chooseLocation({
			success(res) {
				console.log(res)
			}
		})
	}
	// 获取当前位置的方法
	const getCurrentPosition  = () => {
		//调用这个方法一定需要注意申请权限
		uni.getLocation({
			success(res) {
				console.log(res)
				// ref定义的响应式数据，在script中必须通过.value访问或者设置数据，template中不需要
				latitude.value = res.latitude
				longitude.value = res.longitude
				markers.value = [{
					id: 0,
					latitude: res.latitude,
					longitude: res.longitude
				}]
				getHouseData()
			}
		})
	}
	getCurrentPosition()
	
	const getHouseData = () => {
		GET_HOUSE({}).then(res => {
			console.log(res)
			res.map(item => {
				markers.value.push({
					id: item.id,
					latitude: item.latitude || 40.2758241,
					longitude: item.longitude || 116.2330492,
					iconPath: '/static/findhouse.png',
					width: 0,
					height: 0,
					callout: {
						content: item.name,
						color: '#000',
						borderRadius: 18,
						borderWidth: 4,
						display: 'ALWAYS',
						borderColor: '#FDFABA',
						bgColor: '#FFCB0D',
						padding: 10,
						anchorY: 7
					}
				})
			})
			
		})
	}
</script>

<style>
	       
</style>
